<template>
  <div class="app-container">
    <div class="filter-container">
      
<el-row>
  <el-col :span="20">
    
      <el-form ref="filterForm" :model="filterForm" :inline="true" label-position="left" label-width="100px">
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="filterForm.keyword" clearable placeholder="合约" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="状态" prop="subscribeStatus" @input="handleFilter">
            <el-radio-group v-model="filterForm.subscribeStatus">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">已取消</el-radio-button>
              <el-radio-button label="2">正常</el-radio-button>
            </el-radio-group>
        </el-form-item>
      </el-form>

  </el-col>
  <el-col :span="4" style="text-align:right;">
      <el-button type="text" @click="getList()" >搜索</el-button>
      <el-button @click="hiddenDepositWrapper=true;" >新合约</el-button>

  </el-col>
</el-row>
    </div>
    <div style="display:flex;justify-content: flex-start;flex-wrap: wrap;">
    <el-card v-for="(o, index) in list" :key="index">
      <div style="padding: 14px;">
        <span>{{o.symbol}}</span>
          <el-button type="text" class="button">取消</el-button>
      </div>
      <div :id="o.ID" class="chart" style="width:100%;height:300px;">
        这里是行情
      </div>
    </el-card>
  </div>
    <pagination v-show="total>0" :total="total" :page.sync="filterForm.page" :limit.sync="filterForm.size" @pagination="getList" />


    <el-dialog
      title="新合约"
      :visible.sync="hiddenDepositWrapper"
      :close-on-click-modal="false"
      width="50%">
      <el-form ref="filterForm" :model="subscribeForm"  label-position="left" label-width="100px">
        <el-form-item label="合约" prop="symbol">
          <el-input v-model="subscribeForm.symbol" placeholder="合约" />
        </el-form-item>
        <el-form-item label="周期" prop="scale">
            <el-radio-group v-model="subscribeForm.scale">
              <el-radio-button label="1">M1</el-radio-button>
              <el-radio-button label="3">M3</el-radio-button>
              <el-radio-button label="5">M5</el-radio-button>
              <el-radio-button label="10">M10</el-radio-button>
              <el-radio-button label="15">M15</el-radio-button>
              <el-radio-button label="30">M30</el-radio-button>
              <el-radio-button label="60">H1</el-radio-button>
              <el-radio-button label="120">H2</el-radio-button>
              <el-radio-button label="240">H4</el-radio-button>
              <el-radio-button label="1440">D1</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="行情" prop="quote">
            <el-radio-group v-model="subscribeForm.quote">
              <el-radio-button label="1">开启</el-radio-button>
              <el-radio-button label="2">关闭</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="趋势" prop="trend">
          <el-input style="width:20%;" v-model="subscribeForm.ema" placeholder="短期" />
          <el-input style="width:20%;" v-model="subscribeForm.wma" placeholder="长期" />
        </el-form-item>
        <el-form-item label="随机摆动" prop="kdj">
          
          <el-input style="width:20%;" v-model="subscribeForm.fast" placeholder="快线" />
          <el-input style="width:20%;" v-model="subscribeForm.slow" placeholder="慢线" />
          <el-input style="width:20%;" v-model="subscribeForm.signal" placeholder="信号线" />
        </el-form-item>
        <el-form-item label="交易" prop="trade">
            <el-radio-group v-model="subscribeForm.trade">
              <el-radio-button label="1">开启</el-radio-button>
              <el-radio-button label="2">关闭</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="有效期">
           <el-date-picker
            v-model="subscribeForm.beginDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
            </el-date-picker>
            -
           <el-date-picker
            v-model="subscribeForm.endDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hiddenDepositWrapper = false;depositForm.amount=100">取 消</el-button>
        <el-button type="primary" @click="handleSubscribeSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//import { getFaultinessList,  removeFaultinessByID, changeFaultinessStatusByID } from '@/api/development/faultiness'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {getSubscribeList,subscribeSave,subscribeTradeSubmit,subscribeQuoteSubmit,subscribeCannel,subscribeDelete} from '@/api/strategy/subscribe'
import {getPolicyList} from '@/api/strategy/policy' 
import echarts from 'echarts'

//import { init,registerIndicator } from 'klinecharts'
const lineBars = document.getElementById('7039')
const animationDuration = 3000
export default {
  name: 'faultinessAdmin',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      
      socket:"",
      tableKey: 0,
      windowHeight:"800",
      symbolList:[],
      list: [
      ],
      total: 0,
      listLoading: false,
      connected:"loading",
      subscribeForm:{
          scale:"15",
          ema:10,
          wma:20,
          fast:18,
          slow:8,
          signal:5,
          trade:2,
          quote:2
      },
      hiddenDepositWrapper:false,
      filterForm: {
        page: 1,
        size: 10,
        symbolID:0,
        trade:0,
        quote:0,
        subscribeStatus: 0,
        sort: '+id'
      }
    }
  },
  created() {
    this.getList()
  },
  destroyed(){
  },
  mounted() {
  },
  methods: {
    initChart(subscribeID,symbol) {
      let _this = this
      let policyTotal = 0
      let _callFilterForm = {
          page: 1,
          symbolType:1,
          size: 20,
          scale:1440,
          symbol:symbol
      }


      getPolicyList(_callFilterForm).then((response) => {
          if (response.code === 200) {
            let closes = []
            let shortlys = []
            let longlys = []
            let weeks = []
            policyTotal = response.data.total
            response.data.list.forEach((data,index)=>{
              closes.push(data["close"])
              data["ema"] = data["ema"]/100
              shortlys.push(data["ema"].toFixed(2))
              data["wma"] = data["wma"]/100
              longlys.push(data["wma"].toFixed(2))
              weeks.push(data["cycle"])
            })
            shortlys.reverse()
            longlys.reverse()
            weeks.reverse()
            _this.chart = echarts.init(document.getElementById(subscribeID))

            _this.chart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              grid: {
                top: 10,
                left: '2%',
                right: '2%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: [{
                type: 'category',
                data: weeks,
                axisTick: {
                  alignWithLabel: true
                }
              }],
              yAxis: [{
                type: 'value',
                axisTick: {
                  show: false
                }
              }],
              series: [{
                name: '短期',
                type: 'line',
                stack: 'vistors',
                barWidth: '60%',
                itemStyle: {
                  normal: {
                    color: "#00FF00",
                    lineStyle: {
                      color: "#00FF00"
                    }
                  }
                },
                data: shortlys,
                animationDuration
              }, {
                name: '长期',
                type: 'line',
                stack: 'vistors',
                barWidth: '60%',
                data: longlys,
                itemStyle: {
                  normal: {
                    color: "#FF0000",
                    lineStyle: {
                      color: "#FF0000"
                    }
                  }
                },
                animationDuration
              }]
            })
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    getList:function(){
      let _this = this;
      console.log("期权",_this.filterForm)
      getSubscribeList(_this.filterForm).then((response) => {
        console.log("getPolicyList",response)
          if (response.code === 200) {
            this.total = response.data.total
            _this.list = [];
            response.data.list.forEach((data,index)=>{
              if(data['trade'] == 2){
                data['trade'] = true
              }else{
                data['trade'] = false
              }
              _this.list.push(data)
            })
            _this.$nextTick(() => {
              _this.list.forEach((data,index)=>{
                _this.initChart(data["ID"],data["symbol"])
              })
            })
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    getPolicyList:function(symbol){
      let _this = this;
      let policyList = []
      let policyTotal = 0
      let _callFilterForm = {
          page: 1,
          symbolType:1,
          size: 10,
          scale:15,
          symbol:symbol
      }
      console.log("getPolicyList",_callFilterForm)
      getPolicyList(_callFilterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            policyList = response.data.list
            policyTotal = response.data.total
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleResetSubscribe:function(){
      this.subscribeForm = {
          scale:"15",
          ema:10,
          wma:20,
          fast:18,
          slow:8,
          signal:5,
          trade:2,
          quote:2
      }
    },
    handleSubscribeQuoteChange:function(subscribe,allowedTrade){
      let _this = this;
      console.log(subscribe,allowedTrade)
      let _subscribeForm = {
        "subscribeID":subscribe['ID'],
        "quote":0
      }
      if(allowedTrade){
        _subscribeForm['quote'] = 2
      }else{
        _subscribeForm['quote'] = 1
      }
      subscribeQuoteSubmit(_subscribeForm).then((response) => {
        console.log("getPolicyList",response)
          if (response.code === 200) {
            _this.getList()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
      console.log(allowedTrade)
    },
    handleSubscribeTradeChange:function(subscribe,allowedTrade){
      let _this = this;
      console.log(subscribe,allowedTrade)
      let _subscribeForm = {
        "subscribeID":subscribe['ID'],
        "trade":0
      }
      if(allowedTrade){
        _subscribeForm['trade'] = 2
      }else{
        _subscribeForm['trade'] = 1
      }
      subscribeTradeSubmit(_subscribeForm).then((response) => {
        console.log("getPolicyList",response)
          if (response.code === 200) {
            _this.getList()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
      console.log(allowedTrade)
    },
    handleSubscribeChange:function(subscribe){
      this.hiddenDepositWrapper = true
      console.log(subscribe)
      if(subscribe.trade){
        subscribe.trade = 2
      }else{
        subscribe.trade = 1
      }
      if(subscribe.quote){
        subscribe.quote = 2
      }else{
        subscribe.quote = 1
      }
      this.subscribeForm = subscribe

    },
    handleSubscribeRemove:function(subscribe){
      let _this = this;
      subscribeDelete(this.subscribeForm).then((response) => {
        console.log("getPolicyList",response)
          if (response.code === 200) {
            _this.getList()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleSubscribeCannel:function(subscribe){
      let _this = this;
      subscribeCannel({
        "subscribeID":subscribe.ID
      }).then((response) => {
        console.log("getPolicyList",response)
          if (response.code === 200) {
            _this.getList()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleSubscribeSubmit:function(){
      let _this = this;
      subscribeSave(_this.subscribeForm).then((response) => {
          if (response.code === 200) {
            _this.hiddenDepositWrapper = false
            _this.getList()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleDetail:function(item){
      this.$router.push({ path:'/quotation/quotation', query: {"symbol":item.symbol} })
    },
    handleFilter() {
      this.filterForm.page = 1
      this.getList()
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.filterForm.sort = '+id'
      } else {
        this.filterForm.sort = '-id'
      }
      this.handleFilter()
    }
  }
}
</script>
<style>
.el-card { width: 400px; margin-bottom: 15px; margin-right:15px;}
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>